<template>
	<view class="box">
		<!-- 用户信息 -->
		<view class="head-box">
			<view class="c-fff">
				<view class="user-info-box">
					<view class="user-head-image mr15" @click="goInfo">
						<image class="user-head" :src="user_info.avatar" mode=""></image>
						<view class="user-vip-icon zhong" v-if="user_info.manage>0">
							<image v-if="user_info.manage==1" src="../../../static/my/v1.png" mode=""></image>
							<image v-if="user_info.manage==2" src="../../../static/my/v2.png" mode=""></image>
							<image v-if="user_info.manage==3" src="../../../static/my/v3.png" mode=""></image>
							<image v-if="user_info.manage==4" src="../../../static/my/v4.png" mode=""></image>
							<image v-if="user_info.manage==5" src="../../../static/my/v5.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="flex align-c">
							<view class="fz24 bold mr5">
								{{user_info.nickname}}
							</view>
							<!-- <view class="user-identity-box" :style="'background-image: url('+user_identity+');'">
								金牌会员
							</view> -->
						</view>
						<view class="flex align-c">
							<view class="fz15 mr20">
								ID:{{user_info.ownid}}
							</view>
							<view class="copy-btn fz12" @click="copyUserId">
								复制
							</view>
						</view>
						<view class="flex">
							<view class="">抢购次数:</view>
							<view class="">{{user_info.allcounts}}/{{user_info.daycounts}}(总/日)</view>
						</view>
					</view>
				</view>
			</view>
			<image class="set-icon" src="../../../static/my/settings.png" mode="" @click="settings"></image>
			<!-- 企业产权  星路科技-->
			<view class="equity-box">
				<view class="space-between mb5">
					<view class="equity-box-l flex c-fff align-end" @click="goCzhonz">
						<text class="fz12 mr10">企业产权</text>
						<text class="fz24 bold" style="line-height: 37rpx;">{{user_info.ownscore}}</text>
					</view>
					<view class="flex">
						<view class="equity-btn mr10" v-if="giveStatus!=0" @click="mutualConversion('ownscore')">
							互转
						</view>
						<view class="equity-btn" @click="goTix">
							立即提现
						</view>
					</view>
				</view>
				<view class="space-between mb25">
					<view class="equity-box-l flex c-fff align-end" @click="goCzhonz">
						<text class="fz12 mr10">产权价值</text>
						<text class="fz12 bold" style="line-height: 37rpx;">{{ownscoreRatio}}</text>
					</view>
				</view>
				<view class="equity-data-box c-fff space-between">
					<view class="line-box flex-col w33p align-c">
						<view class="fz12">
							健康值
						</view>
						<view class="fz24 bold mt10 mb15" style="line-height: 36rpx;" @click="goCzhonz">
							{{user_info.health|xiaos}}
						</view>
						<view class="equity-btn" @click="goConvert">
							兑换
						</view>
					</view>
					<view class="line-box flex-col w33p align-c">
					    <view class="fz12">
					      金币
					    </view>
					    <view class="fz24 bold mt10 mb15" style="line-height: 36rpx;" @click="goCzhonz">
					      {{user_info.money}}
					    </view>
					    <!-- 按钮容器：充值和提现按钮水平排列 -->
					    <view class="buttons-container">
					      <view class="equity-btn" @click="chongz">
					        充值
					      </view>
					      <view class="equity-btn" @click="withdraw">
					        提现
					      </view>
					    </view>
					  </view>
					<view class="flex-col w33p align-c">
						<view class="fz12">
							消费积分
						</view>
						<view class="fz24 bold mt10 mb15" style="line-height: 36rpx;" @click="goCzhonz">
							{{user_info.score|xiaos}}
						</view>
						<view class="equity-btn" @click="mutualConversion('score')">
							互转
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order-box mb10">
			<view class="order-head-box space-between mb20">
				<view class="flex order-head-l fz15">
					<view class="bold mr30" @click="myTab(0)" :class="selectCurrent==0?'order-style':''">
						直购订单
					</view>
					<view class="bold" @click="myTab(1)" :class="selectCurrent==1?'order-style':''">
						抢购订单
					</view>
				</view>
				<view class="order-head-r zhong" @click="jumpPath">
					<view class="mr8 c9 fz12 bold">
						全部
					</view>
					<image src="../../../static/my/right_icon.png" mode=""></image>
				</view>
			</view>
			<view class="order-list-box flex flex-ju">
			    <template v-if="selectCurrent==0">
			      <view class="flex-col w25p align-c" @click="jumpPath"
			        v-for="(item, order_index) in order_list" :key="order_index">
			        <image class="mb10" :src="item.icon" mode=""></image>
			        <view class="fz12">
			          {{item.name}}
			        </view>
			      </view>
			    </template>
			    
			    <template v-else>
			      <view class="flex-col w300 align-c" @click="jumpPath"
			        v-for="(item, order_index) in order_list1" :key="order_index">
			        <image class="mb10" :src="item.icon" mode=""></image>
			        <view class="fz12">
			          {{item.name}}
			        </view>
			      </view>
			    </template>
			  </view>
		</view>
		<!-- 操作区域 -->
		<view class="control-plate flex mb20">
			<view class="control-btn w25p" @click="jump(item.path)" v-for="(item,indexe) in control_list" :key="indexe">
				<image class="mb10" :src="item.icon" mode=""></image>
				<view class="fz12">
					{{item.name}}
				</view>
			</view>
			<view class="control-btn w25p" @click="jump('/pages/subpackage/shop/tuand')" v-if="applyStatus==0">
				<image class="mb10" src="/static/my/img1.png" mode=""></image>
				<view class="fz12">
					我的客户
				</view>
			</view>
		</view>
		<!-- 精选推荐 -->
		<view class="choiceness-box" v-if="statusw">
			<!-- 标题 -->
			<view class="fz15 bold tac mb20">
				<view class="choiceness-title">
					<view class="l-line"></view>
					精选推荐
					<view class="r-line"></view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-list-box">
				<view class="mb15" v-for="(item, item_index) in goods_list" :key="item_index">
				  <goodsCard @goGoodsDetail='goGoodsDetail' :goods_info='item'></goodsCard>
				</view>
			</view>
		</view>
		<!-- 积分互转-互转数量 -->
		<u-popup v-model="is_show_conversion_popup" mode="center" border-radius="20" width="690rpx" height="600rpx"
			:mask-close-able='false' :closeable='true'>
			<view class="conversion-popup-box">
				<!-- step==1设置互转数量-->
				<block v-if="step==1">
					<view class="fz18 tac mb30">
						设置互转{{ interconversion_type == 'score' ? '消费积分' : '企业产权' }}
					</view>
					<view class="mb30">
						<view class="conversion-line flex align-c fz15 mb15">
							<view class="mr20">
								{{ interconversion_type == 'score' ? '消费积分' : '企业产权' }}：
							</view>
							<u-input v-model="integral_quantity" :placeholder="interconversion_type | is_qx"
								type="text" />
						</view>
						<view class="conversion-line flex align-c fz15 mb15">
							<view class="mr20">个人编号：</view>
							<u-input v-model="getid" placeholder="请输入接收人个人编号" type="text" />
						</view>
						<view class="fz12 c9" v-if="interconversion_type=='ownscore'">
							注：企业产权互转需扣取10%手续费
						</view>
					</view>
					<view class="conversion-btn-box">
						<u-button class="conversion-btn" @click='next'>下一步</u-button>
					</view>
				</block>

				<!-- step==2支付弹框-->
				<block v-if="step==2">
					<view class="fz18 tac mb30">
						输入支付密码
					</view>
					<view class="mb30">
						<view style="text-align: center;margin-bottom: 50rpx;">
							{{interconversion_type == 'score'?'互转消费积分：':'互转企业产权：'}}{{integral_quantity}}
						</view>
						<u-message-input mode="box" :maxlength="6" font-size="35" width="60"
							@finish="finish"></u-message-input>
					</view>
				</block>

				<!-- step==3验证码-->
				<view class="mb30" v-if="step==3&&interconversion_type=='ownscore'">
					<view class="edit-phone">
						<view class="input-box">
							<view class=" flex align-c">
								<view class="input-line-title fz16 mr10">
									手机号<text style="margin-left:50rpx">{{user_info.mobile | phone}}</text>
								</view>
							</view>
							<view class="input-line flex align-c">
								<view class="input-line-title fz16 mr10">
									验证码
								</view>
								<u-input v-model="verification_code" placeholder='请输入短信验证码' type="text" />
								<u-button class="get-code-box" @click='getCode' :throttle-time='throttle_time'
									:disabled='countdown!=60000'>{{showCountdown}}</u-button>
							</view>
						</view>
					</view>
					<view class="conversion-btn-box">
						<u-button class="conversion-btn" @click='GenerateQRCodeRe'>互转</u-button>
					</view>
				</view>

			</view>
		</u-popup>
		<!-- 积分互转-生成二维码 -->
		<u-popup v-model="is_show_generate_qr_code" mode="center" border-radius="20" width="556rpx" height="662rpx"
			:mask-close-able='false' class="generate-qr-code-popup">
			<view class="generate-qr-code-popup-box">
				<view class="generate-qr-code-top zhong mb20">
					<image class="mr10" :src="user_info.avatar" mode=""></image>
					<view class="">
						<view class="fz24 bold">
							{{ user_info.nickname }}
						</view>
						<view class="fz12">
							ID：{{ user_info.id }}
						</view>
					</view>
				</view>
				<view class="generate-qr-code-centre flex-col align-c">
					<view class="fz12 mb20">
						{{ interconversion_type == 'score' ? '消费积分' : '企业产权' }}：
						<text>{{ integral_quantity }}</text>
					</view>
					<view class="mb15">
						<image :src="interconversion_code" mode=""></image>
					</view>
					<view class="fz12 c9">
						打开APP-点击扫一扫-扫码领积分
					</view>
				</view>
				<view class="close-popup-box" @click="closeGeneratePopup">
					<image src="../../../static/my/close-o.png" mode=""></image>
				</view>
			</view>
		</u-popup>
		
		<!-- 提现提示弹窗 -->
		<u-popup v-model="showWithdrawAlert" mode="center" border-radius="24" width="610rpx" height="460rpx"
		         :mask-close-able="false">
		  <view class="custom-alert">
		    
		    <!-- 弹窗内容 -->
		    <view class="alert-content">
		      <!-- 使用uView图标替代图片 -->
		      <u-icon name="warning" color="#E3BA5B" size="60"></u-icon>
		      <view class="alert-title">温馨提示</view>
		      <view class="alert-message">
		        <view>您尚未绑定银行卡或身份证信息</view>
		        <view>请先完成绑定后再进行提现操作</view>
		      </view>
		    </view>
		    
		    <!-- 弹窗底部按钮 -->
		    <view class="alert-footer">
		      <view class="alert-btn cancel-btn" @click="closeWithdrawAlert">
		        取消
		      </view>
		      <view class="alert-btn confirm-btn" @click="goToBindPage">
		        去绑定
		      </view>
		    </view>
		  </view>
		</u-popup>
	</view>
	
</template>

<script>
	import goodsCard from "@/components/goods_card.vue";
	import {
		getUserinfo,
		sendVerificationCode,
		changeMobile,
		phoneVerificationCode
	} from '@/network/loginAndMy.js'
	import {
		goods_list,
		rotation,
		config,
	} from '@/network/api.js'
	export default {
		data() {
			return {
				phone: '', // 手机号
				verification_code: '', // 验证码
				code_time: null, // 验证码定时器
				countdown: 60000, // 验证码倒计时
				throttle_time: null, // 验证码按钮
				control_list: [{
						name: '推广码',
						icon: require('../../../static/my/extension_code.png'),
						id: 0,
						path: 'tuiguangm'
					},
					{
						name: '收货地址',
						icon: require('../../../static/my/delivery_address.png'),
						id: 1,
						path: '/pages/subpackage/my/address'
					},
					{
						name: '账户与安全',
						icon: require('../../../static/my/account_security.png'),
						id: 2,
						path: '/pages/subpackage/my/accountsAndSecurity'
					},
					{
						name: '官方服务',
						icon: require('../../../static/my/customer_service.png'),
						id: 3,
						path: 'guanfkf'
					}
				], // 操控列表
				goods_list: [], // 商品列表
				order_list: [{
						name: '待付款',
						icon: require('../../../static/my/await_payment.png'),
						id: 0
					},
					{
						name: '待发货',
						icon: require('../../../static/my/await_deliver_goods.png'),
						id: 1
					},
					{
						name: '待收货',
						icon: require('../../../static/my/await_receive_goods.png'),
						id: 2
					},
					{
						name: '已完成',
						icon: require('../../../static/my/completed.png'),
						id: 3
					}
				], // 订单列表
				order_list1: [{
						name: '待发货',
						icon: require('../../../static/my/await_deliver_goods.png'),
						id: 1
					},
					{
						name: '待收货',
						icon: require('../../../static/my/await_receive_goods.png'),
						id: 2
					},
					{
						name: '已完成',
						icon: require('../../../static/my/completed.png'),
						id: 3
					}
				],
				user_identity: '../../../static/my/vip_bg.png', // vip图片
				select_order_type: 0, // 选择订单类型
				is_show_conversion_popup: false, // 是否显示互转数量
				integral_quantity: '', // 积分数量
				is_show_generate_qr_code: false, // 是否显示生成二维码弹窗
				user_info: {}, // 用户信息,
				selectCurrent: 0,
				interconversion_type: '', // 互转类型
				interconversion_code: '', // 互转二维码
				level: '', //等级标识，
				step: 1, // 是否限制支付密码弹框,
				getid: '', //个人编码
				statusw: true,
				// 等于1隐藏  0开启
				applyStatus: "",
				// 等于0隐藏
				giveStatus:'',
				exchange:'',
				ownscoreRatio:'1.000000',//星路科技
				showWithdrawAlert: false, // 控制提现提示弹窗显示
			}
		},
		components: {
			goodsCard
		},
		watch: {

		},
		computed: {
			showCountdown() {
				return this.countdown == 60000 ? '发送验证码' : this.countdown / 1000
			},
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
			// 过滤手机号
			phone(num1) {
				return num1.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
			},
			// 判断企业产权/消费积分
			is_qx(num2) {
				return num2 == 'score' ? '请输入消费积分' : '请输入企业产权'
			}
		},
		onShow() {
			this.getUserinfo()
			this.configRe()
		},
		mounted() {
			this.getGoodsList()
			this.configRe()
		},
		methods: {
			// 获取配置信息，星路科技
			configRe() {
				config().then(res => {
					this.applyStatus = res.data.applyStatus
					this.giveStatus=res.data.giveStatus
					this.exchange=res.data.exchange
					this.ownscoreRatio = res.data.ownscoreRatio
				})
			},
			// 是否隐藏推荐
			yinc() {
				console.log(uni.getStorageSync("statusw"), '触发状态')
				this.statusw = uni.getStorageSync("statusw")
			},
			// 互换产权下一步
			next() {
				if (this.integral_quantity == '') {
					uni.showToast({
						title: this.interconversion_type == 'score' ? '请输入消费积分' : '请输入企业产权',
						duration: 2000,
						icon: 'none'
					});
				} else if (this.getid == '') {
					uni.showToast({
						title: '请输入接收人个人编号',
						duration: 2000,
						icon: 'none'
					});
				} else {
					this.step = 2
				}
			},
			// 输入支付密码
			finish(val) {
				console.log(val, this.user_info.payword, 'ceshkjcs.')
				if (this.user_info.payword == '') {
					uni.showToast({
						title: '请设置支付密码',
						duration: 2000,
						icon: 'none'
					});
				} else if (Number(val) != Number(this.user_info.payword)) {
					uni.showToast({
						title: '密码错误',
						duration: 2000,
						icon: 'none'
					});
				} else if (this.interconversion_type == 'score') {
					// 兑换消费积分的时候不需要获取验证码
					this.GenerateQRCodeRe()
				} else {
					this.step = 3
				}
			},
			// 验证码倒计时
			getCode() {
				this.sendVerificationCode()
				this.throttle_time = 60000

				this.code_time = setInterval(() => {
					this.countdown = this.countdown - 1000
					if (this.countdown === 0) {
						clearInterval(this.code_time);
						this.countdown = 60000
						return
					}
				}, 1000)
			},
			goCzhonz() {
				uni.navigateTo({
					url: '/pages/subpackage/my/rechargejil'
				})
			},
			// 发送验证码
			sendVerificationCode() {
				sendVerificationCode({
					userphone: this.user_info.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},

			// 切换直购/抢购
			myTab(index) {
				this.selectCurrent = index
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.user_info = res.data
						this.yinc()
						// console.log(this.user_info.ispass,'入金')
					}
				})
			},
			// 互转操作
			rotation() {
				let props = {
					score: this.integral_quantity,
					type: this.interconversion_type,
					getid: this.getid
				}
				rotation(props).then(res => {
					if (res.code == 1) {
						this.getUserinfo()
						uni.showToast({
							title: '互转成功',
							duration: 2000,
							icon: 'none'
						});
						// this.interconversion_code = res.data
						// this.is_show_generate_qr_code = true
					}
				})
			},
			// 获取精品推荐商品列表
			getGoodsList() {
				let params = {
					object: 'like',
					objectid: '',
					keyword: '',
					limit: 6,
					page: '',
					pagesize: '',
				}
				goods_list(params).then(res => {
					if (res.code == 1) {
						this.goods_list = res.data
					}
				})
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: '/pages/subpackage/shop/productDetail?id=' + id
				})
			},
			// 跳转页面
			jumpPath() {
				// type判断待支付/待付款；is判断直购/抢购
				let data = {
					type: 0,
					is: this.selectCurrent
				}
				if (this.selectCurrent == 0) {
					uni.navigateTo({
						url: '/pages/subpackage/my/myOrder'
					})
				} else {
					uni.navigateTo({
						url: '/pages/subpackage/my/qOrder'
					})
				}

			},
			jump(path) {
				console.log(path, 'kefu')
				if (path == 'guanfkf' || path == 'tuiguangm') {
					//提示模板
					uni.showModal({
						content: path == 'guanfkf' ? '客服电话:13462810086' : this.user_info.ownid, //模板中提示的内容
						confirmText: '复制',
						success: (res) => { //点击复制内容的后调函数
							if (res.confirm) {
								//uni.setClipboardData方法就是讲内容复制到粘贴板
								//意思是H5端没有这个接口！！！
								uni.setClipboardData({
									data: path == 'guanfkf' ? '客服电话:13462810086' : this.user_info
										.ownid, //要被复制的内容
									success: function() {
										//重点~做笔记
										//在success中加入uni.hideToast()可以解决
										uni.showToast({
											title: "复制成功",
											icon: "none",
											duration: 2000,
										});
										//以下就可自定义操作了~
									},
									fail: function(err) {
										uni.showToast({
											title: "复制失败",
											icon: "none",
											duration: 2000,
										});
									}
								});
							} else if (res.cancel) {
								uni.showToast({
									title: "取消复制",
									icon: "none",
									duration: 2000,
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: path
					});
				}

			},
			// 点击复制订单号
			copyUserId() {
				uni.setClipboardData({
					data: String(this.user_info.ownid),
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			// 互转
			mutualConversion(type) {
				this.step = 1
				this.getid = ''
				this.integral_quantity = ''
				this.interconversion_type = type
				this.is_show_conversion_popup = true
			},
			// 互转
			GenerateQRCodeRe() {
				//兑换企业产权的时候才获取验证码
				if (this.interconversion_type == 'ownscore') {
					phoneVerificationCode({
						mobile: this.user_info.mobile,
						captcha: this.verification_code
					}).then(res => {
						if (res.code == 1) {
							this.step = 1
							this.countdown = 60000
							this.is_show_conversion_popup = false
							this.rotation()
						}
					})
				} else {
					this.step = 1
					this.countdown = 60000
					this.is_show_conversion_popup = false
					this.rotation()
				}

			},
			// 关闭生成二维码弹窗
			closeGeneratePopup() {
				this.is_show_generate_qr_code = false
				this.integral_quantity = ""
				this.interconversion_type = ""
				this.interconversion_code = ""
			},
			// 跳转到兑换页
			goConvert() {
				if(this.exchange==0){
					// uni.showToast({
					// 	title: '该功能暂未开放',
					// 	duration: 2000,
					// 	icon: 'none'
					// });
				}else{
					let data = {
						type: 'health',
						typee: 1
					}
					uni.navigateTo({
						url: '/pages/subpackage/my/convert?data=' + JSON.stringify(data)
					})
				}
			},
			// 跳转到充值中心
			chongz() {
				uni.navigateTo({
					url: '/pages/subpackage/my/recharge'
				})
			},
			// 跳转到提现
			goTix() {
				uni.navigateTo({
					url: '/pages/subpackage/my/tix'
				})
			},
			goTixm() {
				uni.navigateTo({
					url: '/pages/subpackage/my/tixm'
				})
			},
			// 跳转到个人信息
			goInfo() {
				uni.navigateTo({
					url: '/pages/subpackage/my/userInfo'
				})
			},
			// 跳转到设置
			settings() {
				uni.navigateTo({
					url: '/pages/subpackage/my/settings'
				})
			},
			// 提现按钮点击事件
			withdraw() {
				// 检查用户是否绑定了银行卡和身份证
				if (!this.user_info.isbank) {
					// 如果未绑定，显示提示弹窗
					this.showWithdrawAlert = true;
				} else {
					// 如果已绑定，调用提现方法
					this.goTixm();
				}
			},
			// 跳转到绑定页面
			goToBindPage() {
				// 关闭弹窗
				this.showWithdrawAlert = false;
				// 跳转到绑定页面（根据您的实际页面路径修改）
				uni.navigateTo({
					url: '/pages/subpackage/my/bindInfo'
				});
			},
			
			// 关闭提现提示弹窗
			closeWithdrawAlert() {
				this.showWithdrawAlert = false;
			},
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #F3F3F3;
		min-height: 100vh;

		.conversion-popup-box {
			padding: 40rpx 20rpx 0;
			box-sizing: border-box;

			.conversion-line {
				height: 90rpx;
				border-bottom: 1rpx solid #E5E5E5;
			}

			.conversion-btn-box {
				.conversion-btn {
					width: 320rpx;
					height: 60rpx;
					background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
					border-radius: 15rpx;
					color: #ffffff;
				}

				uni-button:after {
					content: " ";
					border: none !important;
				}
			}
		}

		.generate-qr-code-popup {
			overflow: initial !important;

			.u-mode-center-box {
				background-color: transparent !important;
				overflow: initial !important;
			}

		.uni-scroll-view {
				overflow: initial !important;
			}

			.generate-qr-code-popup-box {
				background-image: url('../../../static/my/generate_qr_code_bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 100%;
				position: relative;

				.generate-qr-code-top {
					height: 164rpx;

					image {
						width: 86rpx;
						height: 86rpx;
						border-radius: 50%;
					}
				}

				.generate-qr-code-centre {
					image {
						width: 270rpx;
						height: 270rpx;
					}
				}

				.close-popup-box {
					position: absolute;
					display: inline-block;
					bottom: -100rpx;
					left: 50%;
					transform: translateX(-50%);

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.head-box {
			background-image: url("../../../static/my/my-bg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 470rpx;
			padding: 108rpx 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-bottom: 180rpx;

			.user-info-box {
				display: flex;
				align-items: center;

				.user-head {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					display: block;
				}

				.user-identity-box {
					width: 123rpx;
					height: 35rpx;
					line-height: 38rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					padding-right: 10rpx;
					color: #631F0F;
					text-align: right;
					box-sizing: border-box;
					font-size: 18rpx;
					-webkit-text-size-adjust: none;
				}

				.copy-btn {
					width: 62rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					background: linear-gradient(0deg, #f0d3a8 0%, #fff1d0 100%);
					border-radius: 6rpx;
					color: #631F0F;
				}

				.user-head-image {
					position: relative;

					.user-vip-icon {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background-color: #FFE2AC;
						position: absolute;
						bottom: 0;
						right: 0;

						image {
							width: 21rpx;
							height: 21rpx;
						}
					}
				}
			}

			.set-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.equity-box {
				position: absolute;
				width: 690rpx;
				height: 348rpx;
				// height: 240rpx;
				background-image: url("../../../static/my/card_bg.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				left: 50%;
				bottom: -160rpx;
				transform: translateX(-50%);
				padding: 30rpx 20rpx 0;

				.equity-box-l {
					display: inline-block;
					vertical-align: middle;
				}
				.buttons-container {
				  display: flex;
				  justify-content: center;
				  gap: 20rpx; /* 设置按钮间距 */
				  width: 100%;
				}
				
				
				
				.cancel-btn {
				  background: #f8f8f8;
				  color: #666;
				  border: 1px solid #e5e5e5;
				  
				  &:active {
				    background: #eeeeee;
				    transform: translateY(2rpx);
				  }
				}
				
				.confirm-btn {
				  background: linear-gradient(90deg, #B07412, #E3BA5B);
				  color: white;
				  
				  &:active {
				    opacity: 0.9;
				    transform: translateY(2rpx);
				  }
				}
				.equity-btn {
				    /* 保持原有样式 */
				    background-color: #FFDFDB;
				    opacity: 0.91;
				    color: #DB3A2A;
				    font-size: 30rpx;
				    border-radius: 28rpx;
				    padding: 0 20rpx;
				    height: 50rpx;
				    line-height: 50rpx;
				    font-weight: bold;
				    display: inline-block;
				}

				.equity-btn:active {
					color: #fff;
					background-color: #ea6c52;
				}

				.equity-data-box {
					.line-box {
						position: relative;
					}

					.line-box::after {
						content: "";
						width: 2rpx;
						height: 80rpx;
						background-color: #ffffff;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}

		.order-box {
			margin: 0 30rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 40rpx 20rpx;
			box-sizing: border-box;

			.order-head-box {
				.order-head-r {
					image {
						width: 22rpx;
						height: 22rpx;
					}
				}

				.order-head-l {
					.order-style {
						background: linear-gradient(1deg, #b07412 0%, #e3ba5b 100%);
						color: transparent;
						-webkit-background-clip: text;
					}
				}
			}

			.order-list-box {
				image {
					width: 44rpx;
					height: 40rpx;
				}
			}
		}

		.control-plate {
			margin: 0 30rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 40rpx 20rpx;
			box-sizing: border-box;

			.control-btn {
				text-align: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.choiceness-box {
			padding: 0 30rpx;
			width: 100%;
			box-sizing: border-box;

			.choiceness-title {
				display: inline-block;
				position: relative;

				.l-line::after {
					content: "";
					width: 16rpx;
					height: 2rpx;
					background-color: #333333;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: -36rpx;
				}

				.r-line::after {
					content: "";
					width: 16rpx;
					height: 2rpx;
					background-color: #333333;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: -36rpx;
				}
			}

			.goods-list-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}

		.flex-ju {
			justify-content: center;
		}

		.w300 {
			width: 300rpx;
		}

		.edit-phone {
			padding: 20rpx 0 0;
			margin-bottom: 60rpx;

			.input-box {
				padding: 0 30rpx;
				background-color: #ffffff;

				.input-line {
					height: 110rpx;
					width: 100%;
					box-sizing: border-box;
					border-bottom: 1rpx solid #EDEDED;

					.input-line-title {
						width: 130rpx;
					}

					.get-code-box {
						width: 150rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						border: 1rpx solid #E3BA5B;
						border-radius: 5rpx;
						color: #BB8422;
						margin: 0 !important;
						padding: 0 !important;
						font-size: 24rpx;
					}

					uni-button:after {
						content: " ";
						border: none !important;
					}
				}
			}

			.controls-btn-box {
				.controls-btn {
					border: none;
					margin: 0 !important;
					padding: 0 !important;
					font-size: 36rpx;
					color: #ffffff;
					background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
					border-radius: 10rpx;
					height: 90rpx;
					line-height: 90rpx;
					width: 690rpx;
				}

				uni-button:after {
					content: " ";
					border: none !important;
				}
			}
		}
	}
	/* 精美弹窗样式 */
	.custom-alert {
	  position: relative;
	  padding: 40rpx 30rpx 30rpx;
	  background: #ffffff;
	  border-radius: 24rpx;
	  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
	  overflow: hidden;
	}
	
	
	
	.alert-content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 0rpx 0 20rpx;
	}
	
	.alert-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	  margin: 20rpx 0;
	  position: relative;
	}
	
	.alert-title::after {
	  content: '';
	  position: absolute;
	  bottom: -10rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 100rpx;
	  height: 4rpx;
	  background: linear-gradient(90deg, #B07412, #E3BA5B);
	  border-radius: 2rpx;
	}
	
	.alert-message {
	  text-align: center;
	  font-size: 28rpx;
	  color: #666;
	  line-height: 1.6;
	  margin: 30rpx 0;
	  padding: 0 20rpx;
	}
	
	.alert-footer {
	  display: flex;
	  justify-content: space-between;
	  gap: 40rpx;
	  margin-top: 10rpx;
	}
	
	.alert-btn {
	  flex: 1;
	  height: 80rpx;
	  border-radius: 40rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 32rpx;
	  font-weight: bold;
	  transition: all 0.3s;
	}
	
	.cancel-btn {
	  background: #f8f8f8;
	  color: #666;
	  border: 1rpx solid #eee;
	  
	  &:active {
	    background: #eeeeee;
	    transform: translateY(2rpx);
	  }
	}
	
	.confirm-btn {
	  background: linear-gradient(to right, #B07412, #E3BA5B);
	  color: white;
	  box-shadow: 0 4rpx 15rpx rgba(176, 116, 18, 0.3);
	  
	  &:active {
	    opacity: 0.9;
	    transform: translateY(2rpx);
	    box-shadow: 0 2rpx 8rpx rgba(176, 116, 18, 0.3);
	  }
	}
</style>